// reset
body {
  padding: 0;
  margin: 0;
  // -webkit-user-select: none; /*禁止用户选择*/
  // font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  font-family: '微软雅黑', 'Helvetica Neue', Helvetica, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  color: #2c3e50;
  // font-size: 14px;
  font-size: 13px;
}
ul {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}
hr {
  border-color: #e1e1e2;
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
h1,
p {
  margin: 0;
}
//  scrollbar
.el-scrollbar {
  height: 100%;
}
body {
  .el-scrollbar__view,
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

/* global
---------------- */
.drag {
  -webkit-app-region: drag;
}
.no-drag {
  -webkit-app-region: no-drag;
}
.db {
  display: block !important;
}
.di {
  display: inline !important;
}
.dib {
  display: inline-block !important;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix::after {
  clear: both;
  content: " ";
  display: block;
}
.tl {
  text-align: left;
}
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.v-middle {
  display: inline-block;
  vertical-align: middle !important;
}
.h-full {
  height: 100% !important;
}
.w-full {
  width: 100% !important;
}
.full {
  width: 100% !important;
  height: 100% !important;
}
.cursor-p {
  cursor: pointer;
}
.text-ell,
.text-ellipsis {
  white-space: nowrap;
  // display:block;
  text-overflow: ellipsis;
  overflow: hidden;
  // display: inline-block;
}

.zh {
  &-row {
    margin-left:-8px;margin-right:-8px;
    position: relative;
    box-sizing: border-box;
    &::before, 
    &::after {
      display: table;
      content: "";
      clear: both;
    }
  }
  &-col-5 {
    width: 20%;
    float: left;
    box-sizing: border-box;
    padding: 0 8px;
  }
}

@mixin margin1($dir) {
  @if $dir {
    margin-#{ $dir }: 0.25rem !important;
  } @else {
    margin: 0.25rem !important;
  }
}
@mixin margin2($dir) {
  margin-#{ $dir }: 0.5rem !important;
}

.ml-1 {
  @include margin1(left);
}
.mr-1 {
  @include margin1(right);
}
.mt-1 {
  @include margin1(top);
}
.mt-1 {
  @include margin1(bottom);
}
////////////////
.ml-2 {
  @include margin2(left);
}
.mr-2 {
  @include margin2(right);
}
.mt-2 {
  @include margin2(top);
}
.mt-2 {
  @include margin2(bottom);
}

.text-gray {
  color: gray;
}
